<template>
  <div id="baseSet">
    <div class="tips">
      <span>已设置的测点</span>
    </div>
    <div class="wrap-table">
       <el-table
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="name"
          align="center"
          label="测点名称"
          >
        </el-table-column>
        <el-table-column
          prop="type"
          align="center"
          label="测点类型"
          >
        </el-table-column>
        <el-table-column
          prop="lgtd"
          align="center"
          label="测点经度"
          >
        </el-table-column>
        <el-table-column
          prop="lttd"
          align="center"
          label="测点纬度"
         >
        </el-table-column>
        <el-table-column
          prop="status"
          align="center"
          label="状态"
          >
        </el-table-column>
        <el-table-column
          prop="resourceDev"
          align="center"
          label="数据来源"
         >
        </el-table-column>
        <el-table-column
          fixed="right"
          align="center"
          label="操作"
          >
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row,false)" type="button" size="small">查看</el-button>
            <el-button @click="handleClick(scope.row,true)" type="button" size="small">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1000">
      </el-pagination>
    </div>
    <edit-model :showEditModel="showEditModel_" :title="'编辑'" @hiddenSelf="hiddenEditModel" @saveUper="saveInputs">
      <div class="wrap-inputs">
        <span>编辑状态</span>
      </div>
    </edit-model>
    <base-view :showViewModel="showViewModel_" :title="'查看'" @hiddenSelf="hiddenViewModel" >
      <span>查看状态</span>
    </base-view>
  </div>
</template>

<script  >
import editModel from '@/common/components/poupe/edit'
import  baseView from '@/common/components/poupe/view'
export default {
  name: "baseSet",
  components:{
    editModel,
    baseView
  },
  data() {
    return {
      tableData: [
        {
          name: "临江大道电信营业厅",
          type: "流量计",
          lgtd: "东经23°27′30″",
          lttd: "北纬23°27′30″",
          status: '运行中',
          resourceDev: 'NXST10076-RTU-3'
        },
        {
          name: "临江大道电信营业厅",
          type: "流量计",
          lgtd: "东经23°27′30″",
          lttd: "北纬23°27′30″",
          status: '出故障',
          resourceDev: 'NXST10076-RTU-3'
        },
        {
          name: "临江大道电信营业厅",
          type: "流量计",
          lgtd: "东经23°27′30″",
          lttd: "北纬23°27′30″",
          status: '运行中',
          resourceDev: 'NXST10076-RTU-3'
        },
        {
           name: "临江大道电信营业厅",
          type: "流量计",
          lgtd: "东经23°27′30″",
          lttd: "北纬23°27′30″",
          status: '出故障',
          resourceDev: 'NXST10076-RTU-3'
        }
      ],
      showEditModel_:false,
      showViewModel_:false
    }
  },
  methods: {
    handleClick(row,flag) {
      if(flag){
        this.showEditModel_ = true;
      }else{
        this.showViewModel_ = true;
      }
    },
    hiddenViewModel(flag){
      this.showViewModel_ = flag;
    },
    hiddenEditModel(flag){
      this.showEditModel_ = flag;
    },
    saveInputs(flag){
      this.showEditModel_ = flag;
    }
  }
};
</script>
<style  lang="scss" scoped>
* {
  box-sizing: border-box;
}
#baseSet {
  width: 100%;
  height: 100%;
  background: #ccc;
  padding: 20px;
  .tips{
    width: 100%;
    height: 30px;
    padding: 10px 0;
    padding-top: 0;
    font-weight: 600;
    font-size: 14px;
  }
  .wrap-table{
    width: 100%;
    height: calc(100% - 80px);
    background: #fff;
    overflow-y: auto;
  }
  .pagination{
    width:100%;
    height:60px;
    display:flex;
    justify-content:center;
    align-items:center;
  }
}
</style>